﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">
    <!-- Favicons -->
    <link rel="shortcut icon" th:href="@{/assets/img/favicon.ico}" type="image/x-icon">
    <link rel="apple-touch-icon" th:href="@{/assets/img/icon.png}">

    <!-- Title -->
    <title>Zuka - Clean, Minimal eCommerce Bootstrap 4 Template</title>

    <!-- ************************* CSS Files ************************* -->

    <!-- All Plugins CSS  -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">

    <!-- Revoulation CSS  -->
    <link rel="stylesheet" th:href="@{/assets/css/revoulation.css}">

    <!-- style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/main.css}">

    <!-- modernizr JS
    ============================================ -->
    <script th:src="@{/assets/js/vendor/modernizr-2.8.3.min.js}"></script>
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js}"></script>
    <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js}"></script>
    <![endif]-->
</head>

<body class="default-color">

    <!-- Preloader Start -->
    <div class="zuka-preloader active">
        <div class="zuka-preloader-inner h-100 d-flex align-items-center justify-content-center">
            <div class="zuka-child zuka-bounce1"></div>
            <div class="zuka-child zuka-bounce2"></div>
            <div class="zuka-child zuka-bounce3"></div>
        </div>
    </div>
    <!-- Preloader End -->

    <!-- Main Wrapper Start -->
    <div class="wrapper">
        <!-- Header Area Start -->
        <header class="header header-style-1 border-bottom">
            <div class="header-inner">
                <div class="header-top headroom headroom--fixed">
                    <div class="container-fluid">
                        <div class="row align-items-center">
                            <div class="col-lg-2 col-6">
                                <!-- Logo Start Here -->
                                <a href="index.html" class="logo-box">
                                    <figure class="logo--normal"> 
                                        <img th:src="@{/assets/img/logo/logo.png}" alt="Logo"/>
                                    </figure>
                                </a>
                                <!-- Logo End Here -->
                            </div>
                            <div class="col-lg-8 d-none d-lg-block">
                                <!-- Main Navigation Start Here -->
                                <nav class="main-navigation">
                                    <ul class="mainmenu mainmenu--centered">
                                        <li class="mainmenu__item menu-item-has-children megamenu-holder active">
                                            <a href="index.html" class="mainmenu__link">
                                                <span class="mm-text">Home</span>
                                            </a>
                                            <ul class="megamenu two-column">
                                                <li>
                                                    <a class="megamenu-title" href="#">
                                                        <span class="mm-text">Demo Group 01</span>
                                                    </a>
                                                    <ul>
                                                        <li>
                                                            <a href="index.html">
                                                                <span class="mm-text">Demo 01</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-02.html">
                                                                <span class="mm-text">Demo 02</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-03.html">
                                                                <span class="mm-text">Demo 03</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-04.html">
                                                                <span class="mm-text">Demo 04</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-05.html">
                                                                <span class="mm-text">Demo 05</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a class="megamenu-title" href="#">
                                                        <span class="mm-text">Demo Group 02</span>
                                                    </a>
                                                    <ul>
                                                        <li>
                                                            <a href="index-06.html">
                                                                <span class="mm-text">Demo 06</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-07.html">
                                                                <span class="mm-text">Demo 07</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-08.html">
                                                                <span class="mm-text">Demo 08</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-09.html">
                                                                <span class="mm-text">Demo 09</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="index-10.html">
                                                                <span class="mm-text">Demo 10</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="mainmenu__item menu-item-has-children megamenu-holder">
                                            <a href="shop-sidebar.html" class="mainmenu__link">
                                                <span class="mm-text">Shop</span>
                                                <span class="badge">Hot</span>
                                            </a>
                                            <ul class="megamenu four-column">
                                                <li>
                                                    <a class="megamenu-title" href="#">
                                                        <span class="mm-text">Shop Layout</span>
                                                    </a>
                                                    <ul>
                                                        <li>
                                                            <a href="shop-fullwidth.html">
                                                                <span class="mm-text">FullWidth</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span class="mm-text">with Sidebar</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-two-columns.html">
                                                                <span class="mm-text">Two columns</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-three-columns.html">
                                                                <span class="mm-text">Three columns</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-collections.html">
                                                                <span class="mm-text">With collections</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-instagram.html">
                                                                <span class="mm-text">Shop Instagram</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a class="megamenu-title" href="#">
                                                        <span class="mm-text">Single Product</span>
                                                    </a>
                                                    <ul>
                                                        <li>
                                                            <a href="product-details.html">
                                                                <span class="mm-text">Simple 01</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="product-details-02.html">
                                                                <span class="mm-text">Simple 02</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="product-details-sticky.html">
                                                                <span class="mm-text">Sticky Info</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="product-details-gallery.html">
                                                                <span class="mm-text">Thumbnail Gallery</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="product-details-sidebar.html">
                                                                <span class="mm-text">Sidebar</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="product-details-grouped.html">
                                                                <span class="mm-text">Grouped</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="product-details-affiliate.html">
                                                                <span class="mm-text">Affiliate</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="product-details-configurable.html">
                                                                <span class="mm-text">Configurable</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a class="megamenu-title" href="#">
                                                        <span class="mm-text">Shop Pages</span>
                                                    </a>
                                                    <ul class="sub-menu">
                                                        <li>
                                                            <a href="my-account.html">
                                                                <span class="mm-text">My Account</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="cart.html">
                                                                <span class="mm-text">Shopping Cart</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="checkout.html">
                                                                <span class="mm-text">Check Out</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="wishlist.html">
                                                                <span class="mm-text">Wishlist</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="order-tracking.html">
                                                                <span class="mm-text">Order tracking</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="compare.html">
                                                                <span class="mm-text">compare</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="banner-holder">
                                                    <div class="megamenu-banner">
                                                        <div class="megamenu-banner-image"></div>
                                                        <div class="megamenu-banner-info">
                                                            <span>Autumn Winter 2019</span>
                                                            <h3>new <strong>arrival</strong></h3>
                                                        </div>
                                                        <a href="shop-sidebar.html" class="megamenu-banner-link"></a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="mainmenu__item menu-item-has-children has-children">
                                            <a href="#" class="mainmenu__link">
                                                <span class="mm-text">Pages</span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li>
                                                    <a href="about-us.html">
                                                        <span class="mm-text">About Us</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="team.html">
                                                        <span class="mm-text">Our teams</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="contact-us.html">
                                                        <span class="mm-text">Contact Page</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="404.html">
                                                        <span class="mm-text">404 page</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="faqs-page.html">
                                                        <span class="mm-text">FAQs page</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="coming-soon.html">
                                                        <span class="mm-text">Coming Soon</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="mainmenu__item">
                                            <a href="shop-collections.html" class="mainmenu__link">
                                                <span class="mm-text">Collections</span>
                                            </a>
                                        </li>
                                        <li class="mainmenu__item menu-item-has-children has-children">
                                            <a href="blog.html" class="mainmenu__link">
                                                <span class="mm-text">Blog</span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li class="menu-item-has-children has-children">
                                                    <a href="#">
                                                        <span class="mm-text">Blog Grid</span>
                                                    </a>
                                                    <ul class="sub-menu">
                                                        <li>
                                                            <a href="blog-02-columns.html">
                                                                <span class="mm-text">Blog 02 Columns</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="blog-03-columns.html">
                                                                <span class="mm-text">Blog 03 Columns</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="blog.html">
                                                                <span class="mm-text">Blog Sidebar</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="menu-item-has-children has-children">
                                                    <a href="#">
                                                        <span class="mm-text">Blog List</span>
                                                    </a>
                                                    <ul class="sub-menu">
                                                        <li>
                                                            <a href="blog-classic.html">
                                                                <span class="mm-text">Blog Classic</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="blog-no-sidebar.html">
                                                                <span class="mm-text">Blog No Sidebar</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="blog-masonary.html">
                                                        <span class="mm-text">Blog Masonary</span>
                                                    </a>
                                                </li>
                                                <li class="menu-item-has-children has-children">
                                                    <a href="#">
                                                        <span class="mm-text">Blog Details</span>
                                                    </a>
                                                    <ul class="sub-menu">
                                                        <li>
                                                            <a href="single-post.html">
                                                                <span class="mm-text">Single Post</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="single-post-sidebar.html">
                                                                <span class="mm-text">Single Post Sidebar</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="mainmenu__item">
                                            <a href="shop-instagram.html" class="mainmenu__link">
                                                <span class="mm-text">New Look</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                                <!-- Main Navigation End Here -->
                            </div>
                            <div class="col-lg-2 col-6">
                                <ul class="header-toolbar text-right">
                                    <li class="header-toolbar__item d-lg-none">
                                        <a href="#mobileMenu" class="toolbar-btn menu-btn">
                                            <span class="hamburger-icon">
                                            </span>
                                        </a> 
                                    </li>
                                    <li class="header-toolbar__item">
                                        <a href="#searchForm" class="search-btn toolbar-btn">
                                            <i class="dl-icon-search1"></i>
                                        </a>
                                    </li>
                                    <li class="header-toolbar__item">
                                        <a href="#miniCart" class="mini-cart-btn toolbar-btn">
                                            <i class="dl-icon-cart25"></i>
                                            <sup class="mini-cart-count">2</sup>
                                        </a>
                                    </li>
                                    <li class="header-toolbar__item d-none d-lg-block">
                                        <a href="#sideNav" class="toolbar-btn">
                                            <span class="hamburger-icon">
                                            </span>
                                        </a>                                    
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- hidden area -->
            <div class="mobile-menu-wrapper" id="mobileMenu">
                <div class="mobile-menu-inner">
                    <a href="" class="btn-close">
                        <span class="hamburger-icon">
                        </span>
                    </a>
                    <nav class="mobile-navigation">
                        <ul class="mobile-menu">
                            <li class="menu-item-has-children active">
                                <a href="index.html">
                                    <span class="mm-text">Home</span>
                                </a>
                                <ul class="sub-menu">
                                    <li class="menu-item-has-children">
                                        <a href="#">
                                            <span class="mm-text">Demo Group 01</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="index.html">
                                                    <span class="mm-text">Demo 01</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-02.html">
                                                    <span class="mm-text">Demo 02</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-03.html">
                                                    <span class="mm-text">Demo 03</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-04.html">
                                                    <span class="mm-text">Demo 04</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-05.html">
                                                    <span class="mm-text">Demo 05</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="menu-item-has-children">
                                        <a href="#">
                                            <span class="mm-text">Demo Group 02</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="index-06.html">
                                                    <span class="mm-text">Demo 06</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-07.html">
                                                    <span class="mm-text">Demo 07</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-08.html">
                                                    <span class="mm-text">Demo 08</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-09.html">
                                                    <span class="mm-text">Demo 09</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="index-10.html">
                                                    <span class="mm-text">Demo 10</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="shop-sidebar.html">
                                    <span class="mm-text">Shop</span>
                                    <span class="badge">Hot</span>
                                </a>
                                <ul class="sub-menu">
                                    <li class="menu-item-has-children">
                                        <a href="#">
                                            <span class="mm-text">Shop Layout</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="shop-fullwidth.html">
                                                    <span class="mm-text">FullWidth</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="shop-sidebar.html">
                                                    <span class="mm-text">with Sidebar</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="shop-two-columns.html">
                                                    <span class="mm-text">Two columns</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="shop-three-columns.html">
                                                    <span class="mm-text">Three columns</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="shop-collections.html">
                                                    <span class="mm-text">With collections</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="shop-instagram.html">
                                                    <span class="mm-text">Shop Instagram</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="menu-item-has-children">
                                        <a href="#">
                                            <span class="mm-text">Single Product</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="product-details.html">
                                                    <span class="mm-text">Simple 01</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="product-details-02.html">
                                                    <span class="mm-text">Simple 02</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="product-details-sticky.html">
                                                    <span class="mm-text">Sticky Info</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="product-details-gallery.html">
                                                    <span class="mm-text">Thumbnail Gallery</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="product-details-sidebar.html">
                                                    <span class="mm-text">Sidebar</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="product-details-grouped.html">
                                                    <span class="mm-text">Grouped</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="product-details-affiliate.html">
                                                    <span class="mm-text">Affiliate</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="product-details-configurable.html">
                                                    <span class="mm-text">Configurable</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="menu-item-has-children">
                                        <a href="#">
                                            <span class="mm-text">Shop Pages</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="my-account.html">
                                                    <span class="mm-text">My Account</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="cart.html">
                                                    <span class="mm-text">Shopping Cart</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="checkout.html">
                                                    <span class="mm-text">Check Out</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="wishlist.html">
                                                    <span class="mm-text">Wishlist</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="order-tracking.html">
                                                    <span class="mm-text">Order tracking</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="compare.html">
                                                    <span class="mm-text">compare</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="#">
                                    <span class="mm-text">Pages</span>
                                </a>
                                <ul class="sub-menu">
                                    <li>
                                        <a href="about-us.html">
                                            <span class="mm-text">About Us</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="team.html">
                                            <span class="mm-text">Our teams</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="contact-us.html">
                                            <span class="mm-text">Contact Page</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="404.html">
                                            <span class="mm-text">404 page</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="faqs-page.html">
                                            <span class="mm-text">FAQs page</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="coming-soon.html">
                                            <span class="mm-text">Coming Soon</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="mobile-menu__item">
                                <a href="shop-collections.html">
                                    <span class="mm-text">Collections</span>
                                </a>
                            </li>
                            <li class="menu-item-has-children">
                                <a href="blog.html">
                                    <span class="mm-text">Blog</span>
                                </a>
                                <ul class="sub-menu">
                                    <li class="menu-item-has-children has-children">
                                        <a href="#">
                                            <span class="mm-text">Blog Grid</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="blog-02-columns.html">
                                                    <span class="mm-text">Blog 02 Columns</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="blog-03-columns.html">
                                                    <span class="mm-text">Blog 03 Columns</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="blog.html">
                                                    <span class="mm-text">Blog Sidebar</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="menu-item-has-children has-children">
                                        <a href="#">
                                            <span class="mm-text">Blog List</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="blog-classic.html">
                                                    <span class="mm-text">Blog Classic</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="blog-no-sidebar.html">
                                                    <span class="mm-text">Blog No Sidebar</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="blog-masonary.html">
                                            <span class="mm-text">Blog Masonary</span>
                                        </a>
                                    </li>
                                    <li class="menu-item-has-children has-children">
                                        <a href="#">
                                            <span class="mm-text">Blog Details</span>
                                        </a>
                                        <ul class="sub-menu">
                                            <li>
                                                <a href="single-post.html">
                                                    <span class="mm-text">Single Post</span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="single-post-sidebar.html">
                                                    <span class="mm-text">Single Post Sidebar</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="shop-instagram.html">
                                    <span class="mm-text">New Look</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <!-- Header Area End -->

        <!-- Breadcrumb area Start -->
        <div class="breadcrumb-area pt--40 pb--30 pb-md--20">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 text-center">
                        <h1 class="page-title">Shop Sidebar</h1>
                        <ul class="breadcrumb justify-content-center">
                            <li><a href="index.html">Home</a></li>
                            <li class="current"><span>Shop Pages</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- Breadcrumb area End -->

        <!-- Main Content Wrapper Start -->
        <div id="content" class="main-content-wrapper">
            <div class="page-content-inner enable-page-sidebar">
                <div class="container-fluid">
                    <div class="row shop-sidebar mt-md-2 pt--30 pt-md--15 pt-sm--10 pb--90 pb-md--70 pb-sm--50">
                        <!-- 商品展示区 -->
                        <div class="col-lg-9 order-lg-2" id="main-content">
                            <div class="shop-toolbar">
                                <div class="shop-toolbar__inner">
                                    <div class="row align-items-center">
                                        <div class="col-md-6 text-md-left text-center mb-sm--5">
                                            <div class="shop-toolbar__left">
                                                <p class="product-pages">Showing 1–20 of 42 results</p>
                                                <div class="product-view-count">
                                                    <p>Show</p>
                                                    <ul>
                                                        <li><a href="shop-sidebar.html">6</a></li>
                                                        <li class="active"><a href="shop-sidebar.html">12</a></li>
                                                        <li><a href="shop-sidebar.html">15</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="shop-toolbar__right">
                                                <a href="#" class="product-filter-btn shop-toolbar__btn">
                                                    <span>Filters</span>
                                                    <i></i>
                                                </a>
                                                <div class="product-ordering">
                                                    <a href="" class="product-ordering__btn shop-toolbar__btn">
                                                        <span>Short By</span>
                                                        <i></i>
                                                    </a>
                                                    <ul class="product-ordering__list">
                                                        <li class="active"><a href="#">Sort by popularity</a></li>
                                                        <li><a href="#">Sort by average rating</a></li>
                                                        <li><a href="#">Sort by newness</a></li>
                                                        <li><a href="#">Sort by price: low to high</a></li>
                                                        <li><a href="#">Sort by price: high to low</a></li>
                                                    </ul>
                                                </div>
                                                <div class="product-view-mode">
                                                    <a class="active" href="#" data-target="grid">
                                                        <i class="fa fa-th"></i>
                                                    </a>
                                                    <a href="#" data-target="list">
                                                        <i class="fa fa-list"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="advanced-product-filters">
                                    <div class="product-filter">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="product-widget product-widget--price">
                                                    <h3 class="widget-title">Price</h3>
                                                    <ul class="product-widget__list">
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span class="ammount">$20.00</span>
                                                                <span> - </span>
                                                                <span class="ammount">$40.00</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span class="ammount">$40.00</span>
                                                                <span> - </span>
                                                                <span class="ammount">$50.00</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span class="ammount">$50.00</span>
                                                                <span> - </span>
                                                                <span class="ammount">$60.00</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span class="ammount">$60.00</span>
                                                                <span> - </span>
                                                                <span class="ammount">$80.00</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span class="ammount">$80.00</span>
                                                                <span> - </span>
                                                                <span class="ammount">$100.00</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span class="ammount">$100.00</span>
                                                                <span> + </span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="product-widget product-widget--brand">
                                                    <h3 class="widget-title">Brands</h3>
                                                    <ul class="product-widget__list">
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span>Airi</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span>Mango</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span>Valention</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span>Zara</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="product-widget product-widget--color">
                                                    <h3 class="widget-title">Color</h3>
                                                    <ul class="product-widget__list product-color-swatch">
                                                        <li>
                                                            <a href="shop-sidebar.html" class="product-color-swatch-btn blue">
                                                                <span class="product-color-swatch-label">Blue</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html" class="product-color-swatch-btn green">
                                                                <span class="product-color-swatch-label">Green</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html" class="product-color-swatch-btn pink">
                                                                <span class="product-color-swatch-label">Pink</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html" class="product-color-swatch-btn red">
                                                                <span class="product-color-swatch-label">Red</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html" class="product-color-swatch-btn grey">
                                                                <span class="product-color-swatch-label">Grey</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="product-widget product-widget--size">
                                                    <h3 class="widget-title">Size</h3>
                                                    <ul class="product-widget__list">
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span>L</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span>M</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span>S</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span>XL</span>
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="shop-sidebar.html">
                                                                <span>XXL</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="btn-close"><i class="dl-icon-close"></i></a>
                                    </div>
                                </div>
                            </div>
                            <div class="shop-products"> 
                                <div class="row xxl-block-grid-5 grid-space-20">
                                    <!-- 一个商品展示 -->
                                    <div class="col-xl-3 col-lg-4 col-sm-6 ptb--10 mb--20" th:each="good:${pager.list}">
                                        <div class="zuka-product thumb-has-effect">
                                            <!-- 商品图片 -->
                                            <div class="product-inner">
                                                <figure class="product-image">
                                                    <!-- 鼠标移入移出显示的图片 -->
                                                    <div class="product-image--holder">
                                                        <a th:href="@{/shop/product-details(id=${good.id})}">
                                                            <img th:src="@{'/assets/img/products/'+${good.pic}}" alt="Product Image" class="primary-image">
                                                            <img th:src="@{/assets/img/products/prod-8-2-500x625.jpg}" alt="Product Image" class="secondary-image">
                                                        </a>
                                                    </div>
                                                    <!-- 移入后显示的右侧操作 -->
                                                    <div class="zuka-product-action">
                                                        <div class="product-action d-flex flex-column align-items-end">
                                                            <a class="quickview-btn action-btn" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Shop">
                                                                <span data-toggle="modal" data-target="#productModal">
                                                                    <i class="dl-icon-view"></i>
                                                                </span>
                                                            </a>
                                                            <a class="add_wishlist action-btn" href="wishlist.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                                                <i class="dl-icon-heart4"></i>
                                                            </a>
                                                            <a class="add_compare action-btn" href="compare.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Compare">
                                                                <i class="dl-icon-compare"></i>
                                                            </a>
                                                            <a class="add_to_cart_btn action-btn" href="cart.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                                                <i class="dl-icon-cart29"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </figure>
                                                <div class="product-info text-center">
                                                    <div class="star-rating star-four">
                                                        <span>Rated <strong class="rating">4.00</strong> out of 5</span>
                                                    </div>
                                                    <h3 class="product-title">
                                                        <a href="product-details.html" th:text="${good.gname}"></a>
                                                    </h3>
                                                    <span class="product-price-wrapper">
                                                        <span class="money" th:text="'&pound;'+ ${good.price}"></span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 不知道干啥的 -->
                                        <div class="zuka-product-list thumb-has-effect">
                                            <div class="product-inner">
                                                <figure class="product-image">
                                                    <div class="product-image--holder">
                                                        <a href="product-details.html">
                                                            <img th:src="@{/assets/img/products/prod-8-1-500x625.jpg}" alt="Product Image" class="primary-image">
                                                            <img th:src="@{/assets/img/products/prod-8-2-500x625.jpg}" alt="Product Image" class="secondary-image">
                                                            <div class="product-overlay"></div>
                                                        </a>
                                                    </div>
                                                    <div class="product-thumbnail-action">
                                                        <a class="quickview-btn action-btn" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Shop">
                                                            <span data-toggle="modal" data-target="#productModal">
                                                                <i class="dl-icon-view"></i>
                                                            </span>
                                                        </a>
                                                    </div>
                                                    
                                                </figure>
                                                <div class="product-info">
                                                    <div class="star-rating star-four">
                                                        <span>Rated <strong class="rating">4.00</strong> out of 5</span>
                                                    </div>
                                                    <h3 class="product-title mt--20 mb--20">
                                                        <a href="product-details.html">I want to T-Shirt</a>
                                                    </h3>
                                                    <span class="product-price-wrapper mb--10">
                                                        <span class="money">&pound; 159.00</span>
                                                    </span>
                                                    <p class="product-short-description mb--20">
                                                        Donec accumsan auctor iaculis. Sed suscipit arcu ligula, at egestas magna molestie a. Proin ac ex maximus, ultrices justo eget, sodales orci. Aliquam egestas libero ac turpis pharetra, in vehicula lacus scelerisque. Vestibulum ut sem laoreet, feugiat tellus at, hendrerit arcu.
                                                    </p>                                              
                                                    <div class="zuka-product-action zuka-product-action-list">
                                                        <div class="product-action">
                                                            <a class="add_wishlist" href="wishlist.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                                                                <i class="dl-icon-heart4"></i>
                                                            </a>
                                                            <a class="btn add_to_cart_btn" href="cart.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Cart">
                                                                <span>Add To Cart</span>
                                                            </a>
                                                            <a class="add_compare" href="compare.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Compare">
                                                                <i class="dl-icon-compare2"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <nav class="pagination-wrap">
                                <ul class="pagination">
                                    <li><button th:attr="onclick=|selectPage(${pager.prePage}, ${pager.pageSize})|" class="prev page-number" th:if="${pager.pageNum!=pager.navigateFirstPage}"><i class="fa fa-angle-double-left"></i></button></li>
                                    <li><button th:attr="onclick=|selectPage(${pager.navigateFirstPage}, ${pager.pageSize})|" class="page-number" th:text="首页"></button></li>
                                    <li><button th:attr="onclick=|selectPage(${pager.prePage}, ${pager.pageSize})|" class="page-number" th:text="${pager.prePage}" th:if="${pager.prePage!=0}"></button></li>
                                    <li><span class="current page-number" th:text="${pager.pageNum}" th:if="${pager.pageNum!=0}"></span></li>
                                    <li><button th:attr="onclick=|selectPage(${pager.nextPage}, ${pager.pageSize})|" class="page-number" th:text="${pager.nextPage}" th:if="${pager.nextPage!=0}"></button></li>
                                    <li><button th:attr="onclick=|selectPage(${pager.navigateLastPage}, ${pager.pageSize})|" class="page-number" th:text="尾页"></button></li>
                                    <li><button th:attr="onclick=|selectPage(${pager.nextPage}, ${pager.pageSize})|" class="next page-number" th:if="${pager.pageNum!=pager.navigateLastPage}"><i class="fa fa-angle-double-right"></i></button></li>
                                </ul>
                            </nav>
                        </div>
                        <!-- 左侧规格选择栏 -->
                        <div class="col-lg-3 order-lg-1 mt--25 mt-md--40" id="primary-sidebar">
                            <div class="sidebar-widget">
                                <!-- Category Widget Start 商品种类-->
                                <div class="product-widget categroy-widget mb--35 mb-md--30">
                                    <h3 class="widget-title">Categories</h3>
                                    <ul class="prouduct-categories product-widget__list" th:each="cata: ${cataList}">
                                        <li><a th:href="@{/shop/goods(id=${cata.id})}" th:text="${cata.name}">Accessories</a>(<span class="count" th:text="${cata.tnum}"></span>)</li>
                                    </ul>
                                </div>
                                <!-- Category Widget End -->

                                <!-- Price Filter Widget Start -->
                                <div class="product-widget product-price-widget mb--40 mb-md--35">
                                    <h3 class="widget-title">Price</h3>
                                    <div class="widget_content">
                                        <form action="#" method="post">
                                            <div id="slider-range" class="price-slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                                                <div class="ui-slider-range ui-widget-header ui-corner-all">
                                                    
                                                </div>
                                                <span class="ui-slider-handle ui-state-default ui-corner-all">
                                                    
                                                </span>
                                                <span class="ui-slider-handle ui-state-default ui-corner-all">
                                                    
                                                </span>
                                            </div>
                                            <div class="filter-price">
                                                <div class="filter-price__count">
                                                    <div class="filter-price__input-group">
                                                        <span>Price: </span>
                                                        <input type="text" id="amount" class="amount-range" readonly="">
                                                    </div>
                                                    <button type="submit" class="btn btn-style-1 btn-shape-round sidebar-btn">
                                                        filter
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <!-- Price Filter Widget End -->

                                <!-- Category Widget Start -->
                                <div class="product-widget tag-widget mb--35 mb-md--30">
                                    <h3 class="widget-title">Categories</h3>
                                    <div class="tagcloud" th:each="cata: ${cataList}">
                                        <a th:href="@{/shop/goods(id=${cata.id})}" th:text="${cata.name}"></a>
                                    </div>
                                </div>
                                <!-- Category Widget Start -->
                                
                                <!-- Promo Widget Start -->
                                <div class="product-widget promo-widget">
                                    <div class="banner-box banner-type-3 banner-type-3-2 banner-hover-3">
                                        <div class="banner-inner">
                                            <div class="banner-image">
                                                <img th:src="@{/assets/img/banner/shop_banner_sidebar_01.jpg}" alt="Banner">
                                            </div>
                                            <div class="banner-info">
                                                <div class="banner-info--inner">
                                                    <p class="banner-title-2 font-normal color--white">Man Fashion</p>
                                                    <p class="banner-title-7 color--white">Gravity</p>
                                                </div>
                                            </div>
                                            <a class="banner-link banner-overlay" href="shop-sidebar.html">Shop Now</a>
                                        </div>
                                    </div>
                                </div>
                                <!-- Promo Widget End -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Main Content Wrapper Start -->

        <!-- Footer Start -->
        <footer class="footer footer-3 border-top">
            <div class="footer-top pt--80 pt-md--60">
                <div class="container-fluid">
                    <div class="row footer-row">
                        <div class="footer-column footer-column-1 order-first mb-xl--35 mb-md--30 mb-sm--20">
                            <!-- Widget Start Here -->
                            <div class="footer-widget text-center text-sm-left">
                                <div class="textwidget mb--30 mb-sm--20">
                                    <a href="index.html" class="footer-logo">
                                        <img th:src="@{/assets/img/logo/logo.png}" alt="Logo" class="logo-img">
                                    </a>
                                </div>
                                <div class="textwidget mr--40 mr-sm--0">
                                    <p>Integer ut ligula quis lectus fringilla elementum porttitor sed est. Duis fringilla efficitur ligula sed lobortis.</p>
                                </div>
                            </div>
                            <!-- Widget End Here -->
                        </div>
                        <div class="footer-column footer-column-2 order-xl-2 order-3 mb-sm--30 mb-xs--25">
                            <!-- Widget Start Here -->
                            <div class="footer-widget text-center text-sm-left">
                                <h3 class="widget-title mb--25 mb-xs--20">Helful Link</h3>
                                <ul class="widget-menu">
                                    <li><a href="shop-collections.html">The Collections</a></li>
                                    <li><a href="#">Size Guide</a></li>
                                    <li><a href="#">Return Policy</a></li>
                                </ul>
                            </div>
                            <!-- Widget End Here -->
                        </div>
                        <div class="footer-column footer-column-3 order-xl-3 order-4 mb-sm--30">
                            <!-- Widget Start Here -->
                            <div class="footer-widget text-center text-sm-left">
                                <h3 class="widget-title mb--25">Company Link</h3>
                                <ul class="widget-menu">
                                    <li><a href="about-us.html">About Us</a></li>
                                    <li><a href="shop-collections.html">Portfolios</a></li>
                                    <li><a href="#">Our Services</a></li>
                                    <li><a href="#">Affiliate Program</a></li>
                                    <li><a href="#">Work for Zuka</a></li>
                                </ul>
                            </div>
                            <!-- Widget End Here -->
                        </div>
                        <div class="footer-column footer-column-4 order-xl-4 order-5 mb-xs--25">
                            <!-- Widget Start Here -->
                            <div class="footer-widget text-center text-sm-left">
                                <h3 class="widget-title mb--25">Openning Time</h3>
                                <ul class="widget-menu">
                                    <li><span>Monday – Saturday</span></li>
                                    <li><span>7:00 – 22:00</span></li>
                                    <li><span>Sunday</span></li>
                                    <li><span>9:00 – 20:00</span></li>
                                </ul>
                            </div>
                            <!-- Widget End Here -->
                        </div>
                        <div class="footer-column footer-column-5 order-xl-5 order-6">
                            <!-- Contact Widget Start Here -->
                            <div class="footer-widget text-center text-sm-left">
                                <h3 class="widget-title mb--25 mb-xs--20">Contact Info</h3>
                                <div class="widget_contact_info">
                                    <ul>
                                        <li><i class="fa fa-phone"></i><span>(+612) 2531 5600</span></li>
                                        <li><i class="fa fa-envelope"></i><a href="mailto:info@company.com">info@company.com</a></li>
                                        <li><i class="fa fa-map-marker"></i><span>Get direction</span></li>
                                    </ul>
                                </div>
                            </div>
                            <!-- Contact Widget End Here -->
                        </div>
                        <div class="footer-column footer-column-6 order-xl-6 order-2 mb-xl--35 mb-md--30 mb-xs--25">
                            <div class="footer-widget text-center text-sm-left">
                                <h3 class="widget-title mb--25 mb-xs--20">MailChimp Signup Form</h3>
                                <!-- Subscribe widget Start Here -->
                                <div class="subscribe-widget mb--30">
                                    <form action="https://company.us19.list-manage.com/subscribe/post?u=2f2631cacbe4767192d339ef2&amp;id=24db23e68a" class="newsletter-form mc-form" method="post" target="_blank">
                                        <input type="email" name="EMAIL" id="newsletter_email" placeholder="Enter your email address.." required="required" class="newsletter-form__input">
                                        <button type="submit" class="newsletter-form__submit">Submit</button>
                                    </form>
                                </div>
                                <!-- Subscribe widget End Here -->

                                <!-- Social Icons Start Here -->
                                <ul class="social social-medium">
                                    <li class="social__item">
                                        <a href="https://twitter.com" class="social__link">
                                            <i class="fa fa-twitter"></i>
                                        </a>
                                    </li>
                                    <li class="social__item">
                                        <a href="https://plus.google.com" class="social__link">
                                            <i class="fa fa-google-plus"></i>
                                        </a>
                                    </li>
                                    <li class="social__item">
                                        <a href="https://facebook.com" class="social__link">
                                            <i class="fa fa-facebook"></i>
                                        </a>
                                    </li>
                                    <li class="social__item">
                                        <a href="https://youtube.com" class="social__link">
                                            <i class="fa fa-youtube"></i>
                                        </a>
                                    </li>
                                    <li class="social__item">
                                        <a href="https://instagram.com" class="social__link">
                                            <i class="fa fa-instagram"></i>
                                        </a>
                                    </li>
                                </ul>
                                <!-- Social Icons End Here -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom pt--45 pb--50 pb-xs--45">
                <div class="container">
                    <div class="row">
                        <div class="col-12 text-center">
                            <p class="copyright-text">&copy; 2018 ZUKA. Designed by HasTech</p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- Footer End -->

        <!-- Search from Start --> 
        <div class="searchform__popup" id="searchForm">
            <a href="#" class="btn-close"><i class="dl-icon-close"></i></a>
            <div class="searchform__body">
                <p>Start typing and press Enter to search</p>
                <form class="searchform">
                    <input type="text" name="popup-search" id="popup-search" class="searchform__input" placeholder="Search Entire Store...">
                    <button type="submit" class="searchform__submit"><i class="dl-icon-search10"></i></button>
                </form>
            </div>
        </div>
        <!-- Search from End --> 
        
        <!-- Side Navigation Start -->
        <aside class="side-navigation" id="sideNav">
            <div class="side-navigation-wrapper">
                <div class="side-navigation-inner">
                    <div class="widget mb--30">
                        <ul class="sidenav-menu">
                            <li><a href="about-us.html">About Us</a></li>
                            <li><a href="shop-collections.html">Portfolios</a></li>
                            <li><a href="contact-us.html">Our Services</a></li>
                            <li><a href="#">Affiliate Program</a></li>
                            <li><a href="#">Work For Zuka</a></li>
                        </ul>
                    </div>
                    <div class="widget mb--30">
                        <div class="banner-box banner-type-1 banner-hover-1">
                            <div class="banner-inner">
                                <div class="banner-image">
                                    <img th:src="@{/assets/img/banner/menu-humberger.jpg}" alt="Banner">
                                </div>
                                <div class="banner-info">
                                    <a class="banner-title-1 text-uppercase" href="shop-sidebar.html">New</a>
                                </div>
                                <a class="banner-link banner-overlay" href="shop-sidebar.html">New</a>
                            </div>
                        </div>
                    </div>
                    <div class="widget mb--30">
                        <div class="text-widget">
                            <p>
                                <a href="#">(+612) 2531 5600</a>
                                <a href="mailto:info@la-studioweb.com">info@la-studioweb.com</a>
                                PO Box 1622 Colins Street West
                            </p>
                        </div>
                    </div>
                    <div class="widget mb--5">
                        <div class="text-widget google-map-link">
                            <p>
                                <a href="https://www.google.com/maps" target="_blank">Google Maps</a>
                            </p>
                        </div>
                    </div>
                    <div class="widget">
                        <div class="text-widget">
                            <!-- Social Icons Start Here -->
                            <ul class="social social-small">
                                <li class="social__item">
                                    <a href="twitter.com" class="social__link">
                                        <i class="fa fa-twitter"></i>
                                    </a>
                                </li>
                                <li class="social__item">
                                    <a href="plus.google.com" class="social__link">
                                        <i class="fa fa-google-plus"></i>
                                    </a>
                                </li>
                                <li class="social__item">
                                    <a href="facebook.com" class="social__link">
                                        <i class="fa fa-facebook"></i>
                                    </a>
                                </li>
                                <li class="social__item">
                                    <a href="youtube.com" class="social__link">
                                        <i class="fa fa-youtube"></i>
                                    </a>
                                </li>
                                <li class="social__item">
                                    <a href="instagram.com" class="social__link">
                                        <i class="fa fa-instagram"></i>
                                    </a>
                                </li>
                            </ul>
                            <!-- Social Icons End Here -->
                        </div>
                    </div>
                    <div class="widget mtb--15">
                        <div class="text-widget">
                            <p>
                                <img th:src="@{/assets/img/others/payments.png}" alt="payment">
                            </p>
                        </div>
                    </div>
                    <div class="widget">
                        <div class="text-widget">
                            <p class="copyright-text">&copy; 2018 Zuka Shop All rights <a href="http://www.bootstrapmb.com/" title="bootstrapmb">Reserved</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
        <!-- Side Navigation End -->

        <!-- Mini Cart Start -->
        <aside class="mini-cart" id="miniCart">
            <div class="mini-cart-wrapper">
                <a href="" class="btn-close"><i class="dl-icon-close"></i></a>
                <div class="mini-cart-inner" th:if="goods!=null">
                    <h5 class="mini-cart__heading mb--40 mb-lg--30">Shopping Cart</h5>
                    <div class="mini-cart__content">
                        <ul class="mini-cart__list" th:each="good:${goods}">
                            <li class="mini-cart__product">
                                <a href="#" class="remove-from-cart remove">
                                    <i class="dl-icon-close"></i>
                                </a>
                                <div class="mini-cart__product__image">
                                    <img th:src="@{'/assets/img/products/'+${good.pic}}" alt="products">
                                </div>
                                <div class="mini-cart__product__content">
                                    <a class="mini-cart__product__title" href="single-product.html" th:text="${good.name}"></a>
                                    <span th:text="${good.cnt}" ></span> x &pound;<span class="mini-cart__product__quantity" th:text="@{good.pic}"></span>
                                </div>
                            </li>
                        </ul>
                        <div class="mini-cart__total" th:if="${ammount!=null}">
                            <span>Subtotal:&pound;</span>
                            <span class="ammount" th:text="${ammount}"></span>
                        </div>
                        <div class="mini-cart__buttons">
                            <a th:href="@{/cart}" class="btn btn-fullwidth btn-style-1">View Cart</a>
                            <a th:href="@{/checkout}" class="btn btn-fullwidth btn-style-1">Checkout</a>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
        <!-- Mini Cart End -->

        <!-- Global Overlay Start -->
        <div class="zuka-global-overlay"></div>
        <!-- Global Overlay End -->
 
        <!-- Modal Start   暂时未找到对应显示-->
        <div class="modal fade product-modal" id="productModal" tabindex="-1" role="dialog" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-body">
                <button type="button" class="close custom-close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true"><i class="dl-icon-close"></i></span>
                </button>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="zuka-element-carousel product-image-carousel nav-vertical-center nav-style-1"
                                data-slick-options='{
                                    "slidesToShow": 1,
                                    "slidesToScroll": 1,
                                    "arrows": true,
                                    "prevArrow": {"buttonClass": "slick-btn slick-prev", "iconClass": "dl-icon-left" },
                                    "nextArrow": {"buttonClass": "slick-btn slick-next", "iconClass": "dl-icon-right" }
                                }'
                        >
                            <div class="product-image">
                                <div class="product-image--holder">
                                    <a href="single-product.html">
                                        <img th:src="@{/assets/img/products/prod-7-1.jpg}" alt="Product Image" class="primary-image">
                                    </a>
                                </div>
                                <span class="product-badge sale">sale</span>
                            </div>
                            <div class="product-image">
                                <div class="product-image--holder">
                                    <a href="single-product.html">
                                        <img th:src="@{/assets/img/products/prod-7-2.jpg}" alt="Product Image" class="primary-image">
                                    </a>
                                </div>
                                <span class="product-badge sale">sale</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="modal-box product-summary">
                            <div class="product-top-meta d-flex justify-content-between flex-sm-row flex-column-reverse">
                                <div class="product-rating d-flex">
                                    <div class="star-rating star-five">
                                        <span>Rated <strong class="rating">5.00</strong> out of 5</span>
                                    </div>
                                    <a href="" class="review-link">(1 customer review)</a>
                                </div>
                                <div class="product-navigation">
                                    <a href="#" class="prev"><i class="dl-icon-left"></i></a>
                                    <a href="#" class="next"><i class="dl-icon-right"></i></a>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <h3 class="product-title mb--30 mb-md--20">Fake News Network Abstract Novelty T-Shirt</h3>
                            <div class="product-price-wrapper mb--30 mb-md--20">
                                <span class="product-price-old">
                                    <span class="money">&pound;60.00</span>
                                </span>
                                <span class="money">&pound;49.00</span>
                            </div>
                            <p class="product-short-description mb--30 mb-md--20">Donec accumsan auctor iaculis. Sed suscipit arcu ligula, at egestas magna molestie a. Proin ac ex maximus, ultrices justo eget, sodales orci. Aliquam egestas libero ac turpis pharetra, in vehicula lacus scelerisque. Vestibulum ut sem laoreet, feugiat tellus at, hendrerit arcu.</p>
                            <div class="product-action d-flex flex-row align-items-center mb--20">
                                <div class="quantity mr--20">
                                    <input type="number" class="quantity-input" name="qty" id="quick-qty" value="1" min="1">
                                </div>
                                <button type="button" class="btn btn-style-1 btn-semi-large btn-shape-round add-to-cart" onclick="window.location.href='cart.html'">
                                    Add To Cart
                                </button>
                                <a href="wishlist.html" class="action-btn action-btn-square"><i class="dl-icon-heart2"></i></a>
                                <a href="compare.html" class="action-btn action-btn-square"><i class="dl-icon-compare2"></i></a>
                            </div>
                            <div class="product-extra mb--20">
                                <a href="#" class="font-size-12"><i class="fa fa-map-marker"></i>Find store near you</a>
                                <a href="#" class="font-size-12"><i class="fa fa-exchange"></i>Delivery and return</a>
                            </div>
                            <div class="product-summary-footer">
                                <div class="product-meta mb--20">
                                    <span class="sku_wrapper font-size-12">SKU: <span class="sku">REF. LA-887</span></span>
                                    <span class="posted_in font-size-12">Categories: <a href="shop-sidebar.html" rel="tag">Fashions</a></span>
                                </div>
                                <div class="product-share-box">
                                    <span class="font-size-12">Share With</span>
                                    <!-- Social Icons Start Here -->
                                    <ul class="social social-small">
                                        <li class="social__item">
                                            <a href="facebook.com" class="social__link">
                                                <i class="fa fa-facebook"></i>
                                            </a>
                                        </li>
                                        <li class="social__item">
                                            <a href="twitter.com" class="social__link">
                                                <i class="fa fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li class="social__item">
                                            <a href="plus.google.com" class="social__link">
                                                <i class="fa fa-google-plus"></i>
                                            </a>
                                        </li>
                                        <li class="social__item">
                                            <a href="plus.google.com" class="social__link">
                                                <i class="fa fa-pinterest-p"></i>
                                            </a>
                                        </li>
                                    </ul>
                                    <!-- Social Icons End Here -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal End -->

    </div>
    <!-- Main Wrapper End -->


    <!-- ************************* JS Files ************************* -->

    <!-- All Plugins Js -->
    <script th:src="@{/assets/js/plugins.js}"></script>

    <!-- Main JS -->
    <script th:src="@{/assets/js/main.js}"></script>

    <!-- REVOLUTION JS FILES -->
    <script th:src="@{/assets/js/revoulation/jquery.themepunch.tools.min.js}"></script>
    <script th:src="@{/assets/js/revoulation/jquery.themepunch.revolution.min.js}"></script>    

    <!-- REVOLUTION ACTIVE JS FILES -->
    <script th:src="@{/assets/js/revoulation.js}"></script>

    <script th:src="@{/assets/js/vendor/jquery.min.js}"></script>

    <script>
        var cataid=2;
        function selectPage(page,size){
            window.location.href="/shop/goods?id="+cataid+"&page="+page+"&size="+size;
        }

        $(function () {
            $.ajax(
                {

                }
            )
        })
    </script>
</body>

</html>